<template>
  <div>
    <div class="header-box">
        <div class="userbox">
            <div class="user_img">
            <img src="../assets/img/3.webp" alt="">
        </div>
        <div class="user">
            <p class="name">{{name}}</p>
            <p class="signature">个性签名。。。</p>
        </div>
        </div>

        <div class="nav">
        <ul>
            <li>
                <div class="icon iconfont icon-gerenzhuye"></div>
                <p>个人主页</p>
            </li>
            <li>
                <div class="icon iconfont icon-huiyuanzhongxin"></div>
                <p>会员中心</p>
            </li>
            <li>
                <div class="icon iconfont icon-guanzhu"></div>
                <p>关注</p>
            </li>
            <router-link tag="li" to="/collected">
                <div class="icon iconfont icon-shoucang"></div>
                <p>收藏</p>
            </router-link>
            <li @click="$router.push('/footprint')">
                <div class="icon iconfont icon-zuji"></div>
                <p>足迹</p>
            </li>
        </ul>
    </div>

    </div>

    <div class="car">
        <router-link tag="div" class="left" to="/shoppingCar">
            <div class="title">购物车</div>
        </router-link>
        <div class="right">
            <ul>
                <li>
                    <div class="title">卡劵红包</div>
                    <div class="indicate">戳我去领劵 <span class="iconfont icon-you"></span></div>
                </li>
                <li>
                    <div class="title">补贴保障</div>
                    <div class="indicate">退货补运费 <span class="iconfont icon-you"></span></div>
                </li>
                <li>
                    <div class="title">我的钱包</div>
                    <div class="indicate">查看白付美 <span class="iconfont icon-you"></span></div>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="order">
        <div class="titlebox" @click="goOrder">
            <div class="title">我的订单</div>
            <div class="all-title">全部 <span class="iconfont icon-you"></span></div>
        </div>
        <div class="state">
            <ul>
                <li @click="$router.push({path:'/order',query:{conId:1}})">
                    <div class="icon iconfont icon-daifukuan"></div>
                    <p>待付款</p>
                </li>
                <li @click="$router.push({path:'/order',query:{conId:1}})">
                    <div class="icon iconfont icon-lujing"></div>
                    <p>待发货</p>
                </li>
                <li @click="$router.push({path:'/order',query:{conId:2}})">
                    <div class="icon iconfont icon-icon-13"></div>
                    <p>待收货</p>
                </li>
                <li>
                    <div class="icon iconfont icon-pingjia"></div>
                    <p>评价</p>
                </li>
                <li>
                    <div class="icon iconfont icon-shouhou"></div>
                    <p>售后</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="order">
        <div class="titlebox">
            <div class="title">我的工具</div>
            <!-- <div class="all-title">全部 <span class="iconfont icon-you"></span></div> -->
        </div>
        <div class="state">
            <ul>
                <li>
                    <div class="icon iconfont icon-daifukuan"></div>
                    <p>签到换劵</p>
                </li>
                <li>
                    <div class="icon iconfont icon-lujing"></div>
                    <p>浇水领好礼</p>
                </li>
                <li>
                    <div class="icon iconfont icon-icon-13"></div>
                    <p>LOOK中心</p>
                </li>
                <li>
                    <div class="icon iconfont icon-pingjia"></div>
                    <p>美丽借</p>
                </li>
                <li>
                    <div class="icon iconfont icon-shouhou"></div>
                    <p>客服</p>
                </li>

                <li>
                    <div class="icon iconfont icon-daifukuan"></div>
                    <p>主播入驻</p>
                </li>
                <li>
                    <div class="icon iconfont icon-lujing"></div>
                    <p>商家入驻</p>
                </li>
                <li>
                    <div class="icon iconfont icon-icon-13"></div>
                    <p>五一福利</p>
                </li>
                <li>
                    <div class="icon iconfont icon-pingjia"></div>
                    <p>旧衣服回收</p>
                </li>
                <li>
                    <div class="icon iconfont icon-shouhou"></div>
                    <p>设置</p>
                </li>
            </ul>
        </div>
    </div>

    <div>
        <waterfall></waterfall>
    </div>

  </div>
</template>

<script>
import waterfall from "../components/comm/Recommend"
export default {
    data() {
        return {
            name: ""
        }
    },
    methods:{
        goOrder(){
            this.$router.push({path:"/order",query:{conId:0}})
        },
    },
    created(){
        this.name = this.$store.getters.getData.userInfo
    },
     components:{
        waterfall
    }
}
</script>

<style lang="less">
body{
    color: #333;
}
.order{
    background: #fff;
    margin: 10px;
    .titlebox{
        overflow: hidden;
        padding: 10px;
        border-bottom: 2px solid #ccc;
        .title{
            float: left;
            font-size: 20px;
            font-weight: bolder;
        }
        .all-title{
            float: right;
            font-size: 16px;
        }
    }
    .state{
        ul{
            overflow: hidden;
            // display: flex;
            // justify-content:space-around; 
            li{
                float: left;
                width: 20%;
                text-align: center;
                padding: 20px 0;
                .icon{
                    width: 50px;
                    height: 50px;
                    font-size: 40px;
                    text-align: center;
                    margin: 0 auto;
                }
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
.car{
    display: flex;
    justify-content:space-around; 
    height: 200px;
    .left{
        flex: 1;
        height: 100%;
        margin: 0px 10px;
        background: url('../assets/img/gwc.png') no-repeat 0 0;
        background-size: 100%;
        .title{
            font-size: 30px;
            padding: 10px;
        }
    }
    .right{
        flex: 1;
        height: 100%;
        margin-right: 10px;
        background: #fff;
        overflow: hidden;
        ul{
            height: 180px;
            margin: 10px;
            display: flex;
            flex-flow: row wrap;
            align-content:space-between; 
            li{
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid rgb(235, 235, 235);
                .title{
                    float: left;
                    font-size: 22px;
                    font-weight: bolder;
                }
                .indicate{
                    float: right;
                    font-size: 16px;
                    color: #ccc;
                }
            }
            li:last-of-type{
                border: none;
            }
        }
    }
}
.header-box{
    padding: 20px 10px;
    background:  linear-gradient(rgba(210, 224, 235, 1), rgba(225, 228, 233, 0));;
    overflow: hidden;
    .userbox{
        overflow: hidden;
        .user_img{
            float: left;
            width: 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 50%;
            margin-left: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .user{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
            .name{
                font-size: 20px;
                font-weight: bolder;
            }
            .signature{
                font-size: 14px;
            }
        }
    }

    .nav{
        padding: 10px;
        ul{
            display: flex;
            justify-content:space-around; 
            li{
                text-align: center;
                .icon{
                    width: 50px;
                    height: 50px;
                    font-size: 40px;
                    text-align: center;
                    margin: 0 auto;
                }
                p{
                    font-size: 12px;
                }
            }
        }
    }
}
</style>